<!--
 * @Date: 2022-04-18 09:47:56
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-04-29 15:19:28
 * @FilePath: \Vue3-ts-cms\src\views\main\system\user\user.vue
 * @description: 文件描述
-->
<template>
  <div class="user">
    <page-search
      :searchFormConfig="searchFormConfig"
      @handleSearch="handleSearch"
      @handleResetClick="handleResetClick"
    />
    <page-content
      :contentTableConfig="contentTableConfig"
      ref="pageContentRef"
      moduleName="system"
      pageName="users"
      getListUrl="users/list"
      @handleCreateClick="handleNewData"
      @handleUpdateClick="handleEditData"
    />
    <page-modal
      :defaultInfo="defaultInfo"
      ref="pageModalRef"
      pageName="users"
      :modalConfig="modalConfigRef"
    ></page-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'
import { userPageSearchHook } from '@/hooks/userPageSearchHook'
import { userPageModalHook } from '@/hooks/userPageModalHook'
export default defineComponent({
  name: 'user',
  components: {
    PageSearch,
    PageContent,
    PageModal
  },
  setup() {
    const [pageContentRef, handleSearch, handleResetClick] =
      userPageSearchHook()
    const store = useStore()
    // 1.处理密码的逻辑
    const newCallback = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.prop === 'password'
      )
      passwordItem!.isHidden = false
    }
    const editCallback = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.prop === 'password'
      )
      passwordItem!.isHidden = true
    }

    const modalConfigRef = computed(() => {
      const departmentItem = modalConfig.formItems.find(
        (item) => item.prop === 'departmentId'
      )
      departmentItem!.options = store.state.entireDepartment.map(
        (item: any) => {
          return { title: item.name, value: item.id }
        }
      )
      const roleItem = modalConfig.formItems.find(
        (item) => item.prop === 'roleId'
      )
      roleItem!.options = store.state.entireRole.map((item: any) => {
        return { title: item.name, value: item.id }
      })
      return modalConfig
    })
    const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
      userPageModalHook(newCallback, editCallback)
    return {
      searchFormConfig,
      contentTableConfig,
      pageContentRef,
      handleSearch,
      handleResetClick,
      modalConfig,
      defaultInfo,
      modalConfigRef,
      handleNewData,
      handleEditData,
      pageModalRef
    }
  }
})
</script>

<style scoped>
.content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
</style>
